<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getCarouselList, type CarouselItem } from '../api';
import { findTop6Views, type StoryItem } from '../api/story';

const currentSlide = ref(0);
const slides = ref<CarouselItem[]>([]);
const stories = ref<StoryItem[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);
const storiesLoading = ref(true);
const storiesError = ref<string | null>(null);

const showSlide = (index: number) => {
  if (slides.value.length === 0) return;
  currentSlide.value = (index + slides.value.length) % slides.value.length;
};

const nextSlide = () => showSlide(currentSlide.value + 1);
const prevSlide = () => showSlide(currentSlide.value - 1);

const fetchCarouselList = async () => {
  try {
    loading.value = true;
    error.value = null;
    const response = await getCarouselList();
    slides.value = response.data.data;
  } catch (e) {
    error.value = '获取轮播图数据失败';
    console.error('Failed to fetch carousel list:', e);
  } finally {
    loading.value = false;
  }
};

const fetchHotStories = async () => {
  try {
    storiesLoading.value = true;
    storiesError.value = null;
    const response = await findTop6Views();
    stories.value = response.data.data;
  } catch (e) {
    storiesError.value = '获取热门故事失败';
    console.error('Failed to fetch hot stories:', e);
  } finally {
    storiesLoading.value = false;
  }
};

onMounted(() => {
  fetchCarouselList();
  fetchHotStories();
  // 自动轮播
  const timer = setInterval(nextSlide, 5000);
  return () => clearInterval(timer);
});
</script>

<template>
  <div class="container mx-auto px-4 py-4">
    <!-- 搜索框 -->
    <div class="mb-4">
      <div class="relative">
        <input type="text" placeholder="搜索童话故事..." class="w-full px-4 py-2 rounded-full bg-white/80 backdrop-blur-md shadow-lg pl-10 focus:outline-none focus:ring-2 focus:ring-purple-600">
        <img src="https://unpkg.com/lucide-static@latest/icons/search.svg" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" alt="搜索">
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="mb-4 bg-white/80 backdrop-blur-md rounded-2xl p-2 shadow-lg overflow-hidden">
      <div class="relative w-full aspect-[16/9] rounded-xl overflow-hidden">
        <div v-if="loading" class="flex items-center justify-center h-48">
          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
        </div>
        <div v-else-if="error" class="flex items-center justify-center h-48 text-red-500">
          {{ error }}
        </div>
        <template v-else>
          <div v-for="(slide, index) in slides" :key="slide.id" :class="['carousel-item', { active: index === currentSlide }]">
            <img :src="slide.thumbnail" :alt="slide.name" class="w-full h-full object-cover">
            <div class="carousel-caption">{{ slide.name }}</div>
          </div>
        </template>
        <button @click="prevSlide" class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2">
          <img src="https://unpkg.com/lucide-static@latest/icons/chevron-left.svg" class="w-6 h-6" alt="上一张">
        </button>
        <button @click="nextSlide" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2">
          <img src="https://unpkg.com/lucide-static@latest/icons/chevron-right.svg" class="w-6 h-6" alt="下一张">
        </button>
      </div>
    </div>

    <!-- 热门故事 -->
    <div class="mb-8">
      <h2 class="text-xl font-bold mb-4 text-purple-600 text-left">热门故事</h2>
      <div v-if="storiesLoading" class="flex items-center justify-center h-48">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
      </div>
      <div v-else-if="storiesError" class="flex items-center justify-center h-48 text-red-500">
        {{ storiesError }}
      </div>
      <div v-else class="grid grid-cols-2 gap-4">
        <div v-for="story in stories" :key="story.id" class="bg-white/80 backdrop-blur-md rounded-2xl overflow-hidden shadow-lg cursor-pointer story-card" @click="$router.push(`/story/${story.id}`)">
          <div class="relative h-24 overflow-hidden">
            <img :src="story.thumbnail" :alt="story.name" class="w-full h-full object-cover story-image">
          </div>
          <div class="p-2">
            <h5 class="font-semibold text-xs">{{ story.name }}</h5>
            <div class="mt-2 flex items-center text-xs text-gray-400 space-x-2">
              <span>浏览: {{ story.views }}</span>
              <span>收藏: {{ story.collects }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.story-image {
  transition: transform 0.3s ease;
}
.story-card:hover .story-image {
  transform: scale(1.05);
}
.carousel-item {
  display: none;
  transition: opacity 0.5s ease-in-out;
  height: 100%;
  width: 100%;
}
.carousel-item.active {
  display: block;
}
.carousel-caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  color: #4B5563;
}
</style>